/** 相关等待函数的演示操作
 page.waitFor(selectorOrFunctionOrTimeout[, options[, ...args]])
 page.waitForFunction(pageFunction[, options[, ...args]])
 page.waitForNavigation([options])
 page.waitForRequest(urlOrPredicate[, options])
 page.waitForResponse(urlOrPredicate[, options])
 page.waitForSelector(selector[, options])
 page.waitForXPath(xpath[, options])
@see  https://zhaoqize.github.io/puppeteer-api-zh_CN/#?product=Puppeteer&version=v1.20.0&show=api-pagewaitforfunctionpagefunction-options-args
 */
const puppeteer = require('puppeteer'); //引入puppeteer库

(async () => {
    const browser = await puppeteer.launch({    //启动浏览器
        headless: false,   //代码运行时打开浏览器方便观察
        // devtools:true   //打开f12界面
    });
    const page = await browser.newPage();  //打开浏览器的一个tab 页
    /**
     *     1. 等待页面加载完成
     waitUntil <string|Array<string>> 满足什么条件认为页面跳转完成，默认是 load 事件触发时。指定事件数组，那么所有事件触发后才认为是跳转完成。事件包括：
     load - 页面的load事件触发时
     domcontentloaded - 页面的 DOMContentLoaded 事件触发时
     networkidle0 - 不再有网络连接时触发（至少500毫秒后）
     networkidle2 - 只有2个网络连接时触发（至少500毫秒后
     */
    //这里百度访问比较快 我们选择 networkidle2
    await page.goto('https://www.baidu.com/', {timeout: 10 * 1000, waitUntil: 'networkidle2'});  //访问网址 https://www.baidu.com/
    //todo 演示等待 百度按钮元素出现
    //css 语法 #su
    await  page.waitForSelector('#su', {timeout: 10 * 1000, visible: true}).catch(e => console.log(e));
    //xpath 语法 '//input[@id="su"]'
    await  page.waitForXPath('//input[@id="su"]', {timeout: 10 * 1000, visible: true}).catch(e => console.log(e));

    //
    // await page.screenshot({path: 'screenshot/example.png'});  //将当前视图所见截图
    await page.waitFor(5 * 1000); //睡眠5s'
    await browser.close();  //关闭浏览器
})();